import React from "react"

interface IProps {
    label: string
    placement?: 'left' | 'right'
    width?: number
    visible: boolean
    onClose: () => void
}

const Drawer: React.FC<IProps> = props => {
    const { children, label, width = 360, placement = 'right', visible, onClose } = props

    if (!visible) return null
    return (
        <div className={`drawer ${placement}`}>
            <div className='mask' onClick={onClose}></div>
            <div className='main' style={{ width }}>
                <div className='header'>{label}</div>
                <div className='body'>{children}</div>
            </div>
        </div>
    )
}

export default Drawer